<template>
  <div>
    <div class="topimgdiv">
      <img :src="outdata.image" alt="" srcset="" class="topimg">
      <div class="toptitle">
        {{outdata.title}}
      </div>
      <div class="topicon">
        <hd-svg-icon name="hd-shoucang" slot="left" size="30px" color="#ffffff" style="margin-left:10px;"></hd-svg-icon>
        <hd-svg-icon name="hd-pinglun1" slot="left" size="27px" color="#ffffff" style="margin-left:10px;"></hd-svg-icon>
      </div>
    </div>
    <div class="gerenxinxi">
      <yd-flexbox>
            <yd-flexbox-item style="height:100px;">
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509511872382&di=54cefe09d443cef8d41bb05bc8bc6170&imgtype=0&src=http%3A%2F%2Fwww.hntqb.com%2Fresfile%2F2017-04-11%2FA22%2F326691_wangf_1491823636284_s.jpg" alt="" srcset="" class="touxiang">
              <div class="gerenxinxi1">
                <div class="namefont">EricLee</div>
                <div class="level"> Lv7 </div>
                
                <div class="centericon">
                    
                    <hd-svg-icon name="hd-chakan" slot="left" size="13px" color="#ffffff" style="margin-right:5px;"></hd-svg-icon>
                    <span>{{outdata.see}}</span>
                    <hd-svg-icon name="hd-pinglun" slot="left" size="13px" color="#4F4F4F" style="margin-right:5px;margin-left:5px"></hd-svg-icon>
                    <span>{{outdata.num}}</span>
                    
                </div>
                <div class="datesize">{{outdata.create_times}}</div>
              </div>
            </yd-flexbox-item>
            <div class="address">
              <div style="margin-top:10px">{{outdata.destination}}</div>
            </div>
        </yd-flexbox>
    </div>
    <div class="information">
      <yd-flexbox>
            <yd-flexbox-item>
              <hd-svg-icon name="hd-shizhong" size="15px" color="#000000"></hd-svg-icon>
              出发时间&nbsp;&nbsp;{{outdata.tour_date}}
            </yd-flexbox-item>
            <yd-flexbox-item>
              <hd-svg-icon name="hd-icon" size="15px" color="#000000"></hd-svg-icon>
              人均费用&nbsp;&nbsp;{{outdata.money/100}}
            </yd-flexbox-item>
      </yd-flexbox>
    </div>
    <div class="information">
      <yd-flexbox>
            <yd-flexbox-item>
              <hd-svg-icon name="hd-renwu" size="15px" color="#000000"></hd-svg-icon>
              人物&nbsp;&nbsp;{{outdata.personal_relationship_name}}
            </yd-flexbox-item>
            <yd-flexbox-item>
              <hd-svg-icon name="hd-rili-copy" size="15px" color="#000000"></hd-svg-icon>
              出行天数&nbsp;&nbsp;{{outdata.day}}
            </yd-flexbox-item>
      </yd-flexbox>
    </div>
    <div class="content" v-html="outdata.content">
      <!-- “临淄中国古车博物馆，坐落在后李文化遗址上，是当代中国首家最系统、最完整、以车马遗址与文物陈列融为一体的博物馆。该馆包括春秋殉马车展厅和中国古车陈列展厅两部分：后李春秋殉车马坑列全国十大考古发现之一
    ┉┉”
    我原本对古代的车马没什么兴趣，但听爸爸这么一说，我还是在五一假日期间去了临淄的古车博物馆。
      在第一展厅，我了解到：车、马是我国古代陆上的主要交通工具。我国古车以其优异的性能在世界上长期处于领先地位。骑乘所用马具中极为重要的构件——马镫，
    也是我国首先发明的。在这方面，我国曾对人类文明作出了巨大的贡献。看到这儿，我为中国古代先进的技术感到骄傲。
      在第二展厅，我看到许多古代车马的复原模型。其中，有些皇帝坐的车辆并不是马拉着的，而是骆驼、大象拉着的，看到这儿，我又联想到历史课上学的：西汉张骞开辟丝绸之路，使我国与西域各国取得密切联系；
    来到驯马坑，听导游讲解道：“春秋殉马坑殉战车10辆，马32匹，规模之大，配套之齐全，马饰之精美，为当代全国之冠，列全国十大考古发现之一。后李春秋殉车马，分为一号坑、二号坑。
    一号坑长32米、宽5米、车10辆、马32匹。二号坑长8米、宽3米、车3辆、马6匹。”我还注意到，有的地方有一些像贝壳一样的东西，这时，导游道出其中的秘密：“贝壳是夏商时期的钱币，在春秋时期已不使用；但用贝壳陪葬代表了当时那户人家的地位和富有。
    由此也能看出，这户人家是非常富有、地位高贵的。”原来如此！在我国古代，埋葬一个人还这么麻烦，还得有陪葬品，并且还要把马弄晕了一起埋葬，多残忍！我不禁暗暗想到。 -->
    <!-- {{outdata.content}} -->
    </div>
    <div class="zhuzuoquan">
      本游记著作权葫芦岛官方所有,任何形式转载请联系作者.© 2017 
      <div style="text-align:center"> - THE END - </div>
    </div>
    <div class="youjihuifutitle" v-if="showpinglun === '1'">游记回复<span>7</span></div>
      <div style="border-bottom: 1px solid #999999;width:90%;margin-left:5%" v-for="(spitems,$index) in speakdata" :key="$index">
        <div class="youjihuifubody">
          <div class="huifu_gerenxinxi">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509511872382&di=54cefe09d443cef8d41bb05bc8bc6170&imgtype=0&src=http%3A%2F%2Fwww.hntqb.com%2Fresfile%2F2017-04-11%2FA22%2F326691_wangf_1491823636284_s.jpg" alt="" srcset="" class="touxiang2">
            <div style="width:100%;height:30px;">
              <div class="namefont1">EricLee</div>
              <div class="level1"> Lv7 </div>
            </div>
            <div class="datebottom">{{spitems.create_time}}</div>
          </div>
        </div>
        <div class="body_tupinamiaoshu" v-html="spitems.content">
        </div>
        <div class="body_yinyongtupian">
          <div style="width:100%;padding-top:10px;font-size:.25rem;margin-left:3%">引用了游记的图片</div>
          <img :src="spitems.image" alt="" srcset="" class="yinyongtupian">
        </div>
      </div>
    <div class="xiangqingdengpao" v-if="showdengpao === '1'">
      <div class="dengpao" @click="show = true">
        <hd-svg-icon name="hd-dengpao" slot="left" size="35px" color="#FF8000"></hd-svg-icon>
      </div>
      <yd-popup v-model="show" position="bottom" height="65%">
        <div class="dp_renwu">
          <div style="height:30px;">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509511872382&di=54cefe09d443cef8d41bb05bc8bc6170&imgtype=0&src=http%3A%2F%2Fwww.hntqb.com%2Fresfile%2F2017-04-11%2FA22%2F326691_wangf_1491823636284_s.jpg" alt="" srcset="" class="touxiang3">
          </div>
          <div style="font-size:.3rem;color:#FF8000;margin-left: 10px;">EricLee</div>
          <div style="font-size:.28rem; margin-bottom:10px;margin-left: 10px;">在游记里豪迈的提到了~</div>
        </div>
        <div class="dp-body">
          <div class="dp_title">
            <img src="http://d.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=8d4a8117b1003af34defd464001aea6a/8601a18b87d6277f25b653262f381f30e924fc0c.jpg" alt="" srcset="" class="jingdianimg">
            <div style="float:left;font-size:.3rem;margin-top:15px;margin-left:10px;margin-bottom:10px;">{{dengpaodata.Htitle}}</div>
          </div>
          <div class="dp-content" v-for="hotel in dengpaodata.Hlist" :key="hotel.index">
            <div class="dp-content1">{{hotel.name}}</div>
            <div class="dp-content1"><yd-rate slot="left" size="20px" v-model="hotel.star" color="#333333" active-color="#333333"></yd-rate></div>
            <div class="dp-content1">{{hotel.num}}条评论</div>
          </div>
          <!-- <div class="dp-content">
            <div class="dp-content1">美国国际机场</div>
            <div class="dp-content1"><yd-rate slot="left" size="20px" v-model="rate4" color="#333333" active-color="#333333"></yd-rate></div>
            <div class="dp-content1">609条评论</div>
          </div> -->
        </div>
        <div class="dp-body">
          <div class="dp_title">
            <img src="http://d.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=8d4a8117b1003af34defd464001aea6a/8601a18b87d6277f25b653262f381f30e924fc0c.jpg" alt="" srcset="" class="jingdianimg">
            <div style="float:left;font-size:.3rem;margin-top:15px;margin-left:10px;margin-bottom:10px;">{{dengpaodata.Jtitle}}</div>
          </div>
          <div class="dp-content" v-for="jingqu in dengpaodata.Jlist" :key="jingqu.index">
            <div class="dp-content1">{{jingqu.name}}</div>
            <div class="dp-content1"><yd-rate slot="left" size="20px" v-model="jingqu.star" color="#333333" active-color="#333333"></yd-rate></div>
            <div class="dp-content1">{{jingqu.num}}条评论</div>
          </div>
        </div>
      </yd-popup>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'travelnotesinfo',
    data() {
      return {
        show: false,
        rate4: 4,
        outdata: {},
        speakdata: [],
        result: '',
        dengpaodata: {},
        showdengpao: '',
        showpinglun: ''
      }
    },
    mounted: function() {
      this.load();
    },
    methods: {
      load() {
        this.hdAjax({
          url: this.API.travelNotesUpdateSeeNum,
          data: {
            id: this.$route.query.id
          },
          success: (resultData) => {
            this.hdAjax({
              url: this.API.getTravelsInfo,
              data: {
                id: this.$route.query.id
              },
              success: (resultData) => {
                this.outdata = resultData.data;
              }
            });
          }
        });
        this.hdAjax({
          url: this.API.findCommentList,
          data: {
            source_type: 'T',
            place_id: this.$route.query.id
          },
          success: (resultData) => {
            this.speakarr = resultData.data.results.splice(0, 3);
            this.speakarr.forEach(function(element) {
              var imagearr = element.image.split(',');
              element.image = imagearr[0];
              // this.speakdata.push(element);
              // console.log(this.speakdata);
              // 获取评论创建时间
              var createtime = new Date(element.create_time.replace(/-/g, '/')).getTime();
              var second = 1000;
              var minute = second * 60;
              var hour = minute * 60;
              var day = hour * 24;
              var week = day * 7;
              // var halfamonth = day * 15;
              var month = day * 30;
              var now = new Date().getTime();
              var diffValue = now - createtime;
              if (diffValue < 0) { return; }
              var secC = diffValue / second;
              var minC = diffValue / minute;
              var hourC = diffValue / hour;
              var dayC = diffValue / day;
              var weekC = diffValue / week;
              var monthC = diffValue / month;
              // if (minC >= 1) {
              //   this.result = ' ' + parseInt(minC) + '分钟前'
              // } else if (hourC >= 1) {
              //   this.result = ' ' + parseInt(hourC) + '小时前'
              // } else if (dayC >= 1) {
              //   this.result = ' ' + parseInt(dayC) + '天前'
              // } else if (weekC >= 1) {
              //   this.result = ' ' + parseInt(weekC) + '周前'
              // } else if (monthC >= 1) {
              //   this.result = ' ' + parseInt(monthC) + '月前'
              // } else {
              //   this.result = '刚刚';
              // }
              if (monthC >= 1) {
                this.result = ' ' + parseInt(monthC) + '月前'
              } else if (weekC >= 1) {
                this.result = ' ' + parseInt(weekC) + '周前'
              } else if (dayC >= 1) {
                this.result = ' ' + parseInt(dayC) + '天前'
              } else if (hourC >= 1) {
                this.result = ' ' + parseInt(hourC) + '小时前'
              } else if (minC >= 1) {
                this.result = ' ' + parseInt(minC) + '分钟前'
              } else if (secC >= 1) {
                this.result = ' ' + parseInt(secC) + '秒前'
              } else {
                this.result = '刚刚';
              }
              element.create_time = this.result;
              this.speakdata.push(element);
            }, this);
            // console.log(resultData.data.results)
            if (resultData.data.results.length !== 0) {
              this.showpinglun = '1'
            }
          }
        });
        this.hdAjax({
          url: this.API.findHotelProductUserList,
          data: {
            id: this.$route.query.id
          },
          success: (resultData) => {
            this.dengpaodata = resultData.data;
            // console.log(this.dengpaodata.Hlist)
            if (this.dengpaodata.Hlist !== undefined && this.dengpaodata.Jlist !== undefined) {
              this.showdengpao = '1'
            }
          }
        })
      }
    }
  }
</script>

<style scoped>
  .topimg{
    width: 100%;
    height: 250px;
    /* position:relative */
  }
  .toptitle{
    position:absolute;
    top:195px;
    width: 80%;
    font-size:.4rem;
    color: #ffffff;
    margin-left: 3%;
  }
  .topicon{
    position:absolute;
    top: 5%;
    left:75%;
  }
  .gerenxinxi{
    width: 96%;
    height: 80px;
    border-bottom:  1px solid #999999;
    margin-left: 2%;
  }
  .touxiang{
    width: 60px;
    height:60px;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: 50px;
    float: left;
  }
  .gerenxinxi1{
    float: left;
    width: 68%;
    margin-top: 15px;
    height:65px;
  }
  .namefont{
    float: left;
    font-size:.4rem;
    font-weight: 800;
    margin-left: 8%;
  }
  .level{
    float: left;
    font-size:.3rem;
    margin-top: 2%;
    margin-left: 3%;
    border:  1px solid #FF8000;
  }
  .datesize{
    width:50%;
    float: right;
    /* height: 30px; */
    text-align: center;
    margin-top: 10px;
    font-size:.25rem;
  }
  .centericon{
    width:50%;
    float: right;
    height: 30px;
    text-align: center;
    margin-top: 10px;
    font-size:.25rem;
  }
  .address{
    width: 30%;
    height: 60px;
    font-size: .6rem;
    text-align: center;
    margin-top: 0px;
    border-left:  1px solid #999999;
    margin-bottom: 15px;
  }
  .information{
    width: 90%;
    margin-left: 10%;
    margin-top: 20px;
  }
  .content{
    width: 94%;
    margin-left: 3%;
    margin-top: 20px;
    font-size:.3rem;
  }
  .zhuzuoquan{
    width: 90%;
    margin-left: 5%;
    margin-top: 20px;
    color: #999999;
    font-size: .25rem;
  }
  .youjihuifutitle{
    margin-left: 5%;
    font-size: .35rem;
    margin-top: 20px;
  }
  .youjihuifubody{
    margin-left: 5%;
    margin-top: 20px;
  }
  .huifu_gerenxinxi{
    width: 90%;
    height: 50px;
  }
  .touxiang2{
    float: left;
    width: 50px;
    height:50px;
    border-radius: 50px;
  }
  .namefont1{
    float: left;
    font-size:.3rem;
    margin-left: 3%;
    margin-top:10px;
  }
  .level1{
    float: left;
    font-size:.23rem;
    margin-left: 2%;
    margin-top:10px;
    border:  1px solid #FF8000;
  }
  .datebottom{
    float: left;
    font-size:.23rem;
    margin-left: 3%;
  }
  .body_tupinamiaoshu{
    width: 90%;
    margin-left:5%;
    font-size:.3rem;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .body_yinyongtupian{
    width: 90%;
    margin-left: 5%;
    background-color: 	#F0F0F0;
    font-size:.25;
    margin-bottom: 20px;
    /* border-bottom:  1px solid #999999; */
  }
  .yinyongtupian{
    width: 60%;
    height: 300px;
    margin-left:3%;
    margin-bottom:3%;
    margin-top:2%;
  }
  .dengpao{
    border: 1px solid #00E3E3;
    border-radius: 50px;
    background:  	#00E3E3;
    text-align: center;
    position: fixed;
    width: 13%;
    height: 53px;
    line-height: 68px;
    left: 83%;
    bottom: 100px;
    z-index: 100;
  }
  .dp_renwu{
    /* margin-top: 10px; */
    border-bottom:  1px solid #999999;
  }
  .touxiang3{
    width: 60px;
    height:60px;
    border-radius: 50px;
    /* position:absolute; */
    float:right;
    /* margin-top:10px; */
    /* margin-right: 10px; */
    /* z-index: 200; */
  }
  .jingdianimg{
    width: 30px;
    height: 30px;
    border-radius: 50px;
    float: left;
    margin-left: 20px;
    margin-top:10px;
  }
  .dp_title{
    height:50px;
    border-bottom:  1px solid #999999;
    background-color:		#F0F0F0
  }
  .dp-content{
    font-size: .3rem;
    border-bottom:  1px solid #999999;
  }
  .dp-content1{
    margin-top: 8px;
    margin-bottom: 5px;
    margin-left: 10px;
  }
</style>

